<template>
  <div class="h-[48px] flex justify-between items-center" @click="switchResult">
    <div class="w-[50px] text-center text-[14px] text-[#555]">{{ preDrawIssue }}</div>
    <div class="flex-1 w-0 flex items-center">
      <div class="flex" v-if="roomState.opened">
        <sscOpening type="default" class="!mr-[4px]" />
      </div>
      <div class="flex" v-else>
        <sscBall class="!mr-[4px]" :num="i" v-for="i in lotteryCode"></sscBall>
      </div>
    </div>
    <div class="w-[50px] flex items-center text-[12px] justify-between">
      <span class="text-blue">{{ extendedRes?.sum }}</span>
      <span
        class="ml-[4px] text-red"
        :class="{
          'text-blue': extendedRes?.dx == '小'
        }"
        >{{ extendedRes?.dx }}</span
      >
      <span
        class="ml-[4px] text-red"
        :class="{
          'text-blue': extendedRes?.ds == '单'
        }"
        >{{ extendedRes?.ds }}</span
      >
      <span
        class="ml-[4px] text-red"
        :class="{
          'text-blue': extendedRes?.lhh == '虎',
          'text-green': extendedRes?.lhh == '和'
        }"
        >{{ extendedRes?.lhh }}</span
      >
    </div>
    <div class="w-[54px] flex justify-end mr-[14px]">
      <img
        :class="{
          active: roomState.resultOpen
        }"
        class="w-[15px] h-[9px] rotate-0 duration-300 transition-all"
        src="@/assets/images/down.png"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { sscSumLH } from "@/utils/game";
import { useResult } from "../hooks/use-result";
const { sscBall, sscOpening, preDrawIssue, lotteryCode, switchResult } = useResult();

const roomState = inject<RoomState>("roomState") as RoomState;
const extendedRes = computed(() => sscSumLH(lotteryCode.value));
</script>
<style lang="scss" scoped>
.active {
  transform: rotate(180deg); /* 旋转 180 度 */
}
</style>
